<template>
  <div class="home-view">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">欢迎来到 GovernTalk 公考论坛</h1>
      <p class="page-subtitle">您的公务员考试学习交流平台</p>
    </div>

    <!-- 最新帖子区域 -->
    <section class="section">
      <div class="section-header">
        <h2 class="section-title">最新讨论</h2>
        <router-link to="/forum" class="section-more">查看更多</router-link>
      </div>
      <div class="post-list">
        <PostCard 
          v-for="post in latestPosts" 
          :key="post.id"
          :post="post"
          :show-summary="true"
          :show-images="true"
          :show-actions="false"
          class="mb-4"
        />
      </div>
    </section>

    <!-- 热门帖子区域 -->
    <section class="section">
      <div class="section-header">
        <h2 class="section-title">热门讨论</h2>
        <router-link to="/forum" class="section-more">查看更多</router-link>
      </div>
      <div class="post-list">
        <PostCard 
          v-for="post in hotPosts" 
          :key="post.id"
          :post="post"
          :show-summary="true"
          :show-images="true"
          :show-actions="false"
          class="mb-4"
        />
      </div>
    </section>

    <!-- 学习资源区域 -->
    <section class="section">
      <div class="section-header">
        <h2 class="section-title">推荐资源</h2>
        <router-link to="/resources" class="section-more">查看更多</router-link>
      </div>
      <div class="resource-grid">
        <ResourceCard 
          v-for="resource in hotResources" 
          :key="resource.id"
          :resource="resource"
          :show-author="true"
          :show-actions="true"
          class="mb-4"
        />
      </div>
    </section>

    <!-- 学习小组区域 -->
    <section class="section">
      <div class="section-header">
        <h2 class="section-title">热门学习小组</h2>
        <router-link to="/study-groups" class="section-more">查看更多</router-link>
      </div>
      <div class="group-grid">
        <GroupCard 
          v-for="group in popularGroups" 
          :key="group.id"
          :group="group"
          :show-latest-activity="true"
          :show-member-avatars="true"
          class="mb-4"
        />
      </div>
    </section>

    <!-- 题目示例区域 -->
    <section class="section">
      <div class="section-header">
        <h2 class="section-title">题目示例</h2>
        <router-link to="/search-question" class="section-more">查看更多</router-link>
      </div>
      <div class="question-list">
        <QuestionCard 
          v-for="question in sampleQuestions" 
          :key="question.id"
          :question="question"
          :show-answer="false"
          :show-stats="true"
          class="mb-4"
        />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import PostCard from '@/components/PostCard.vue';
import ResourceCard from '@/components/ResourceCard.vue';
import GroupCard from '@/components/GroupCard.vue';
import QuestionCard from '@/components/QuestionCard.vue';
import { getHotPosts, getLatestPosts } from '@/api/forum';
import { getHotResources } from '@/api/resource';
import { searchQuestions } from '@/api/question';
import { getAllGroups } from '@/api/group';

// 导航到文章详情页 (已移除，现在由PostCard组件自己处理)

// 数据状态
const loading = ref(false);
const latestPosts = ref<any[]>([]);
const hotPosts = ref<any[]>([]);
const hotResources = ref<any[]>([]);
const sampleQuestions = ref<any[]>([]);
const popularGroups = ref<any[]>([]);

// 加载数据
const loadData = async () => {
  loading.value = true;
  try {
    // 并行加载所有数据
    const [latestPostsData, hotPostsData, resourcesData, questionsData, groupsData] = await Promise.all([
      getLatestPosts(4), // 获取4个最新帖子
      getHotPosts(4), // 获取4个热门帖子
      getHotResources(4), // 获取4个热门资源
      searchQuestions({ page: 1, pageSize: 4 }), // 获取4个题目
      getAllGroups({ page: 1, pageSize: 4, sortBy: 'popular' }) // 获取4个热门小组
    ]);
    
    latestPosts.value = latestPostsData || [];
    hotPosts.value = hotPostsData || [];
    hotResources.value = resourcesData || [];
    sampleQuestions.value = Array.isArray(questionsData) ? questionsData : [];
    popularGroups.value = groupsData?.content || [];
    
    // 如果API调用失败，显示空状态
    if (latestPosts.value.length === 0 && hotPosts.value.length === 0) {
      console.warn('没有获取到数据');
    }
  } catch (error) {
    console.error('加载数据失败:', error);
    // 如果API调用失败，显示空状态
  } finally {
    loading.value = false;
  }
};


// 组件挂载时加载数据
onMounted(() => {
  loadData();
});

</script>

<style lang="scss" scoped>
.home-view {
  padding: 20px;
  padding-top: 100px; /* 增加顶部内边距，避免被导航栏遮挡 */
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  .page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .page-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
  }
}

.section {
  margin-bottom: 50px;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;

    .section-title {
      font-size: 1.8rem;
      font-weight: 600;
      color: #1f2937;
    }

    .section-more {
      color: #3b82f6;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s;

      &:hover {
        color: #2563eb;
        text-decoration: underline;
      }
    }
  }

  .post-list, .question-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .resource-grid, .group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
  }
}
</style>